import { Button, Card, Popconfirm, Switch, Form, InputNumber, Input, Modal } from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import { useEffect } from 'react';

import { IconButton, Iconify } from '@/components/icon';
import { useCommon } from '@/hooks/common';

export default function OrganizationPage() {
  const uri = 'dept';
  const cateName = '部门管理';
  const formParams: any = {
    deptName: '',
    id: '',
    parentId: '',
    leader: '',
    orderNum: '',
    phone: '',
    status: 0,
  };
  const {
    data = {},
    ModalPros,
    onCreate,
    doDel,
    onEdit,
    handleChange,
  } = useCommon({ name: '', userId: '' }, uri, {});

  const columns: ColumnsType<any> = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 60,
    },
    {
      title: '部门名称',
      dataIndex: 'deptName',
      align: 'center',
      width: 100,
    },
    {
      title: '部门领导',
      dataIndex: 'leader',
      align: 'center',
      width: 100,
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      align: 'center',
      width: 100,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      align: 'center',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 120,
      render: (status) => <Switch checked={status === 0} />,
    },
    {
      title: '操作',
      key: 'operation',
      align: 'center',
      width: 100,
      render: (_, record) => (
        <div className="flex w-full justify-center text-gray">
          {/* <IconButton
            onClick={() => {
              push(`${pathname}/${record.id}`);
            }}
          >
            <Iconify icon="mdi:card-account-details" size={18} />
          </IconButton> */}
          <IconButton
            onClick={() => {
              onEdit(record);
            }}
          >
            <Iconify icon="solar:pen-bold-duotone" size={18} />
          </IconButton>
          <Popconfirm
            title="确认删除该数据？"
            okText="确定"
            onConfirm={() => doDel(record.id)}
            cancelText="取消"
            placement="left"
          >
            <IconButton>
              <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
            </IconButton>
          </Popconfirm>
        </div>
      ),
    },
  ];

  return (
    <>
      <Card
        title={cateName}
        extra={
          <Button
            type="primary"
            onClick={() => {
              onCreate({ ...formParams });
            }}
          >
            新增
          </Button>
        }
      >
        <Table
          rowKey="id"
          size="small"
          pagination={{ total: data.totalCount }}
          scroll={{ x: 'max-content' }}
          columns={columns}
          dataSource={data.list}
          onChange={handleChange}
        />
      </Card>
      <CommonModal {...ModalPros} />
    </>
  );
}

function CommonModal({ title, show, formValue, onOk, onCancel }: any) {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ ...formValue });
  }, [formValue, form]);
  return (
    <Modal
      title={title}
      open={show}
      onOk={() => onOk({ ...formValue, ...form.getFieldsValue() })}
      onCancel={onCancel}
    >
      <Form
        initialValues={formValue}
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item<any> label="部门名称" name="deptName" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="负责人" name="leader" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="邮箱" name="email" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="联系手机" name="phone" required>
          <InputNumber />
        </Form.Item>
      </Form>
    </Modal>
  );
}
